<script setup lang="ts">
import { ref } from 'vue'
import router from 'router'
import { userInfoStore } from 'store/userInfo'
import { storeToRefs } from 'pinia'
import { User } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import MyIcon from "@/components/MyIcon.vue";

let { isLogin, userInfo } = storeToRefs(userInfoStore())
// console.log(router)
const activate = ref(router.currentRoute.value.path)
const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key,userInfo,localStorage.getItem("userInfo"));
  if (userInfo.value==""&& key=="/userInfo/modifyInfo"||localStorage.getItem("userInfo")==null&& key=="/userInfo/modifyInfo")
  {
    console.log(key);
    ElMessage({
      type:"warning",
      message:"请先登录"
    })
    router.replace()
  }
}
const logout = () => {
  userInfoStore().logout()
  router.push("/home")
}
const handleInfo =(e)=>{
      console.log(e);

}
</script>

<template>
  <el-menu
    :default-active="activate"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    :router="true"
  >
    <el-menu-item index="/home">
      <my-icon icon-name="videohome-mian">
        首页
      </my-icon>
    </el-menu-item>
    <el-menu-item index="/hot">
      <my-icon icon-name="videohot1">
        热门视频
      </my-icon>
    </el-menu-item>
    <el-menu-item index="/physical">
      <my-icon icon-name="videohot1">
        体育
      </my-icon>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/userInfo/modifyInfo">
      <my-icon icon-name="videogerenzhongxin">
        <span> 个人中心 </span>
      </my-icon>

    </el-menu-item>
    <el-menu-item v-if="isLogin" @click="logout" >
      <my-icon  icon-name="videoico_dengchu">
        退出
      </my-icon>
    </el-menu-item>
    <el-menu-item v-if="!isLogin" @click="router.push('/sigin')" >
      <my-icon  icon-name="videodengludengru">
        登录
      </my-icon>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>